<template>
	<div class="scene-monitoring">
		<div class="header-card">
			<span>施工单位：山西二建</span>
			<el-select v-model="value" filterable placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<!-- <div class="enginering-box"></div> -->
		<div class="infinite-list-wrapper" style="overflow:auto">
			<div class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
				<div  v-for='(item,index) in count' :key="index">{{item}}</div>
			</div>
			<!-- <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
				<li  v-for='(item,index) in count' :key="index" class="list-item">{{ item }}</li>
			</ul> -->
			<p v-if="loading">加载中...</p>
			<p v-if="noMore">没有更多了</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "SceneMonitoring",
		props: {
			msg: String,
		},
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				count: 9,
				loading: false
			}
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		created() {},
		methods: {
			load() {
				this.loading = true
				console.log(2222222)
				// setTimeout(() => {
				// 	this.count += 2
				// 	this.loading = false
				// }, 2000)
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "../common/css/common";
	.scene-monitoring{
		width:100%;
		height: 300px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		background: #fff;
		.header-card{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
		}
	}
	.infinite-list-wrapper{
		width:100%;
		height:300px;
		padding:2%;
		box-sizing: border-box;
		background:pink;
		.list{
			width:100%;
			height:auto;
			display:flex;
			flex-direction:row;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-wrap:wrap;
		  background:pink;
			padding-top: 30px;
			>div{
				width:30%;
				height:100px;
				border:1px solid #000;
				margin-bottom:30px;
			}
			>div:nth-child(3n){
				margin-right:0;
			}
		}
	}
</style>
